<template>
	<view class="">
		<kk-child @add="onAdd" @change="onChange"></kk-child>
		<view class="box" :style="{ background: color, fontSize: size + 'px' }">
			num: {{ num }}
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	const num = ref(0);
	const color = ref("#fff");
	const size = ref(12);

	function onAdd(e) {
		console.log(e);
		num.value = e;
		color.value = "#" + String(e).substring(3, 9);
	}

	function onChange(e) {
		console.log(e);
		size.value = e;
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 300px;
		height: 300px;
	}
</style>